<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>文章添加页面</title>

        <style>
            html {
                height: 100%;
            }
            body {
                height: 100%;
            }
            * {
                padding: 0;
                margin: 0;
                letter-spacing: .05em;
            }
            .main{
                background-image: linear-gradient(to right,#5ee7df,#b490ca);
                height: 100%;
            }
            .form{
                width: 400px;
                height: 600px;
                padding: 0 50px;
                border-radius: 20px;
                position: relative;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff; 
            }
            .form .header{
                font-size: 20px;
                color: rgb(67, 112, 150);
                font-weight: bold;
                text-align: center; 
                line-height: 50px;
            }
            .form .input{
                width: 100%;
            }
            .form .content{
                font-size: 20px;
                color: rgb(67, 112, 150);
                font-weight: bold;
                text-align: center; 
                line-height: 50px;
            }
            .form .content{
                width: 100%;
            }
            .form .submit{
                background-image: linear-gradient(to left,#b490ca 0%, #84fab0 51%,#b490ca 100%);
                cursor: pointer;
                margin: 5px;
                padding: 8px;
                width: 100%;
                border-width: 1px;
                border-radius: 5px;
                color: #fff;
            }
            .form .submit:hover{  
                background-image: linear-gradient(to right,#84fab0 0%,#b490ca 51%, #84fab0 100%);
            }
            .form .reset{
                background-image: linear-gradient(to left,#b490ca 0%, #84fab0 51%,#b490ca 100%);
                cursor: pointer;
                margin: 5px;
                padding: 8px;
                width: 100%;
                border-width: 1px;
                border-radius: 5px;
                color: #fff;
            }
            .form .reset:hover{  
                background-image: linear-gradient(to right,#84fab0 0%,#b490ca 51%, #84fab0 100%);
            }
        </style>

    </head>
    <body>
        <div class="main">
            <div class="form">

                <form action="news_add_do.php" method="post">
                    <div class="header">
                        <label>标题</label>
                    </div>
                    <input type="text" name="Title" id="Title"  class="input"/>
                    <div class="content">
                        <label>内容</label>
                    </div>                
                    <div class="content">
                        <textarea name="Content" id="Content" cols="40" rows="20" ></textarea>
                    </div>
                    <div>
                        <input type="submit" value="提交" class="submit"/>
                        <br/>
                        <input type="reset" value="重置"  class="reset"/>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>